{% extends "base_site.html" %}

{% block title %}{{ config.title }}{% endblock %}

{% block content_header %}

        <p class='nav-links'>
            <a href="javascript:CE.TOUR.draw()">tour</a>&nbsp;
            <a href="{{ config.online_help_url }}" target="_blank">help</a>
            <a href="javascript:CE.TOUR.about()">about</a>&nbsp;
            <a href="mailto:{{ config.contact_us_email }}" target="_blank">contact us</a>
        </p>

        {% if config.show_header_animation %}
        
            <a href="{{ config.header_animation_image_url }}" target="_blank">
	            <img src="{{ config.header_animation_image1.name }}" alt="Hishuk ish tsawalk" id='everything0' />
	            <img src="{{ config.header_animation_image2.name }}" alt="Everything is one" id='everything1' />
            </a>
        {% endif %}
        
        <div id="timeline_toggle">
            <p>hello,
            {% ifequal user.first_name "Anonymous" %}
                {{ user }} visitor | <a href='{% url auth_logout %}?next={% url auth_login %}'>sign in</a>
            {% else %}
                {{ user }} | <a href='{% url auth_logout %}?next=/'>sign out</a>
            {% endifequal %}
            </p>
            
            <div id="d_clip_container" style="position:relative">
                <div id="d_clip_button" class="my_clip_button"><a href='#'>link</a></div>
            </div>

            <p><a href="javascript:CE.WIDGETS.SLIDER.toggle();">hide timeline</a></p>
        </div>

{% endblock %}
 
{% block content %}
        
    
    <!-- pre-load some images to prevent clunkly ui behaviour at run time -->

    <img src='/media/img/stem-r.png'/> 
    <img src='/media/img/stem-l.png'/> 
    <img src='/media/img/back.png' class='preload'/>
    <img src='/media/img/movie-icon.png' class='preload'/>
    <img src='/media/img/photo-icon.png' class='preload'/>
    <img src='/media/img/story-icon.png' class='preload'/>
    <img src='/media/img/composite-icon.png' class='preload'/>
    <img src='/media/img/chart-icon.png' class='preload'/>
    
    <!-- done pre-loading images -->
    
    <center id="progressbar_container">
      <h2>LOADING...</h2>
      <div id="progressbar">
        <div class="progressbar-value" style="width: 17%;" ></div>
      </div>
    </center>
    
    <table id="ce_dialog" class='rounded ce-ui'>
        <tr><td class='rounded'>
            <p class='close-button'>
                <img src="/media/img/close.png" />
            </p>
            <h3 class='dialog-title'></h3>
            <p class='inner'></p>
        </td></tr>
    </table> 
    
    <img class='ce-stem' src='/media/img/stem-l.png'/>
    
    <div id="ce_tooltip"></div>
    
    <div id="ce_slider_rulings">
        <div class='widgets'>
            <div id="ce_date_display" class="ce-ui"></div>
            <div id="ce_play_controls" class="ce-ui">
                <span id="ce_start_button"></span>
                <span id="ce_rew_button"></span>
                <span id="ce_play_button"></span>
                <span id="ce_ff_button"></span>
                <span id="ce_end_button"></span>
            </div>
        </div>
        <table><tr><td></td></tr></table>        
        <div id="ce_slider_markers"></div>
    </div>

    <div id="ce_mouse_position"></div>

    <div id="ce_scale_bar" class='ce-ui'>
        <div style="visibility: visible; width: 65px;" class="olControlScaleLineTop"></div>
    </div>

    {% if config.show_logo_and_copyright %}

        <a href="http://www.ecotrust.ca/services_overview/communities" target="_blank">
        <div id="powered_by">
        </div>
        </a>
         
        <div id="copyright">
            Copyright &copy; <SCRIPT>
            var year=new Date();
            year=year.getYear();
            if (year<1900) year+=1900;
            document.write(year);
            </SCRIPT> <a href="http://www.ecotrust.ca/" target="_blank">Ecotrust Canada</a>
        </div>

    {% endif %}
     
    <div id="ce_map" class='ce-ui'></div>
    
    <div id="ce_right" class="ce-ui">
        <h2>THEME</h2>
        <div id='ce_menu_theme' class='menu'>&nbsp;</div>
        
        <h2>MAP</h2>
        <div id='ce_menu_map' class='menu'>[select a map]</div>
        
        <h2 id='ce_tab_theme' class='tab tab-active'>DESCRIPTION</h2>
        <div id="ce_tab_theme_content" class='tab-content'>
           <p class='description'></p>
        </div>
         
        <div class='linebreak'></div>
        
        <h2 id='ce_tab_layer' class='tab tab-active'>LEGEND</h2>
        <div id="ce_tab_layer_content" class='tab-content'>
           <p class='legend'></p>
        </div>
        
        <div class='linebreak'></div>
        
        <h2 id='ce_tab_media' class='tab tab-active'>MULTIMEDIA</h2>
        
        <div id="ce_tab_media_content" class='tab-content'>
            <p id="media_filters">
                <div id="photo_filter" class='css-sprite media-filter active' sprite-src='media|0'></div>
                <div id="sound_filter" class='css-sprite media-filter' sprite-src='media|1'></div>
                <div id="movie_filter" class='css-sprite media-filter' sprite-src='media|2'></div>
                <div id="chart_filter" class='css-sprite media-filter' sprite-src='media|3'></div>
                <div id="story_filter" class='css-sprite media-filter' sprite-src='media|4'></div>
                <div class='clear'></div>
                <h2 class='filter-name'>photo</h2>
            </p>
            <p class='multimedia-items'>
                <h2></h2>
            </p>
        </div>

    </div>

    <div id="ce_intro" style='display:none;'>
        {{config.intro|safe}}
    </div>
    
    <div id="ce_intro_title" style='display:none;'>
        Welcome to the {{config.title|safe}}!
    </div>
    
    <div id="ce_tour" style='display:none;'>
        {{config.about|safe}}
    </div>
    
    <div id="ce_tour_title" style='display:none;'>
        {{config.title|safe}}
    </div>
    
    <div id="ce_tour_step1_title" style='display:none;'>
        {{config.tour_step1_title|safe}}
    </div>
    
    <div id="ce_tour_step1_content" style='display:none;'>
        {{config.tour_step1_content|safe}}
    </div>
    
    <div id="ce_tour_step2_title" style='display:none;'>
        {{config.tour_step2_title|safe}}
    </div>
    
    <div id="ce_tour_step2_content" style='display:none;'>
        {{config.tour_step2_content|safe}}
    </div>
    
    <div id="ce_tour_step3_title" style='display:none;'>
        {{config.tour_step3_title|safe}}
    </div>
    
    <div id="ce_tour_step3_content" style='display:none;'>
        {{config.tour_step3_content|safe}}
    </div>
    
    <div id="ce_tour_step4_title" style='display:none;'>
        {{config.tour_step4_title|safe}}
    </div>
    
    <div id="ce_tour_step4_content" style='display:none;'>
        {{config.tour_step4_content|safe}}
    </div>
    
    <div id="ce_tour_step5_title" style='display:none;'>
        {{config.tour_step5_title|safe}}
    </div>
    
    <div id="ce_tour_step5_content" style='display:none;'>
        {{config.tour_step5_content|safe}}
    </div>
    
    <div id="ce_about" style='display:none;'>
        {{config.about_flat_page.content|safe}}
    </div>
    
    <div id="ce_about_title" style='display:none;'>
        {{config.about_flat_page.title|safe}}
    </div>
    
    <div id="ce_theme_menu" class="ce-ui ce-menu-div" style='display:none'></div>
    <div id="ce_navigation_menu" class="ce-ui ce-menu-div" style='display:none'></div>
    
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="/media/js/jquery.js" type="text/javascript"></script>
    <script src="/media/js/jquery-ui.min.js" type="text/javascript"></script>
    <link rel='stylesheet' href='/media/css/CMP.css' type="text/css" />
    <script src="/media/js/core.js" type="text/javascript" ></script>
    
    <script>
        
        CE.progress(33);
        
        CE.dev = {% if settings.DEV %}true{% else %}false{% endif %};
        
    </script>

    <!-- preload references to Virtual Earth, Yahoo Maps, and Google Maps  -->

    <!-- Google Maps API key: -->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key={{ config.google_api_key }}'></script>

    <!-- production temp...  -->
    <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAfW37_57y5A0DuAB6SxVpShQv22TUKqT2UlbkU3P31p5SCvLsnBQuBOwL9X0TAez5JpTcHHYd3pAoXg'></script> -->
    
    {% if not settings.DEV %}
    
        <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
        <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script> 
        
    {% endif %}
    
    <script>CE.progress(67);</script>
    <script src="/media/js/openlayers/OpenLayers.js" type="text/javascript"></script> 

    {% if settings.DEV %}
            
        {% for script in settings.SCRIPTS %}
            
            <script src="/media/js/{{ script }}" type="text/javascript" language="javascript"></script>
            
        {% endfor %}
    
    {% else %}
    
       <script src="/jsmin/" type="text/javascript"></script>
       
    {% endif %}

    <script>
   
        /* import static lookup tables from DB */
        CE.media_types = {{ media_types|safe }};
        CE.formats = {{ formats|safe }};
        CE.THEME.themes = {{ themes|safe }};
        CE.THEME.default_theme = {{ config.default_theme.id|default:"null" }};
        CE.PLACE.places = {{ places|safe }};
        
        CE.user = {
            auth: {{ auth }},
            id: {{ user.id }}
        };
        CE.config = {
            location_western_longitude : {{ config.location_western_longitude }}, 
            location_southern_latitude : {{ config.location_southern_latitude }}, 
            location_eastern_longitude : {{ config.location_eastern_longitude }}, 
            location_northern_latitude : {{ config.location_northern_latitude }}
        };
        
        CE.hide_timeline_default = '{{ config.hide_timeline_default }}';
        /* initialize the application */
        window.onload = function() {
           CE.progress(100);
           CE.init();
           $('#header').css('background-color','{{ config.header_background_color|default:"#d7ce81" }}');
           $('#header a').css('color','{{ config.header_link_color|default:"#D3181C" }}');
        };
        
        CE.progress(83);
    </script>
    
    {% if not settings.DEV %}

	    {% if config.google_analytics_id|length > 0 %}

			<script type="text/javascript">
			
			  var _gaq = _gaq || [];
			  _gaq.push(['_setAccount', '{{config.google_analytics_id|safe}}']);
			  _gaq.push(['_trackPageview']);
			
			  (function() {
			    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			  })();
			
			</script>
	    {% endif %}
    
    {% endif %}
    
    <!--[if IE]>
        <style>
            .olControlScaleLine {
                font-size:11px;
                padding:1px !important;
            }
        </style>
    <![endif]-->
    
{% endblock %}
        
